*{
    margin: 0;
    padding:0;
}
.box{
    position: relative;
    width: 1226px;
    height: 460px;
    margin: 100px auto;
    cursor: pointer;
}
.box-img{
    position: relative;
    list-style: none;
}
.box-img li{
    position: absolute;
    width: 1226px;
    height: 460px;
    opacity:0;
    transition: opacity 2s linear;
}
.box-img img{
    width: 1226px;
    height: 460px;
}
.box-btn{
    position: absolute;
    list-style: none;
    bottom: 5px;
    right: 5px;
}
.box-btn i{
    float: left;
    width: 10px;
    height: 10px;
    margin-right: 10px;
    border-radius: 10px;
    border: 1px solid darkgray;
    background-color: aliceblue;
    cursor: pointer;
}
.btn-prev{
    position: absolute;
    text-align: center;
    font-size: 30px;
    line-height: 50px;
    width: 30px;
    height: 50px;
    top:50%;
    margin-top: -25px;
    left: 0;
    background-color: rgba(0,0,0,.5);
    border-radius: 0 10px 10px 0;
    cursor: pointer;
    opacity: .3;
    transition: opacity .3s;
}
.btn-prev:hover{
    opacity: 1;
    transition: all .3s;
}
.btn-next{
    position: absolute;
    text-align: center;
    font-size: 30px;
    line-height: 50px;
    width: 30px;
    height: 50px;
    top:50%;
    margin-top: -25px;
    right: 0;
    background-color: rgba(0,0,0,.5);
    border-radius:  10px 0 0 10px;
    cursor: pointer;
    opacity: .3;
    transition: opacity .3s;
}
.btn-next:hover{
    opacity: 1;
    transition: all .3s;
}
.box-img .active1{
    opacity:1;
    transition: all 2s linear;
}
.box-btn .active2{
    background-color: darkgray;
}
